<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

<div id="app"> 
  <!-- 1. .stop修饰符的使用 -->
  <div @click="divClick">
    aaaaaa
    <button @click.stop="btnClick">按钮</button>
  </div>

  <!-- 2. .prevent修饰符的使用 -->
  <br/>
  <form action="baidu">
    <input type="submit" value="提交" @click.prevent="submitClick">
  </form>

  <!-- 3. .监听某个键盘的键帽 -->
  <input type="text" @keyup.enter="keyUp">

  <!-- 4. .once修饰符的使用 -->
  <button @click.once="btn2Click">按钮2</button>

  <!-- 5. .native修饰符（应该修饰事件） -->
</div>
  
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',//用于挂载要管理的元素
    data: {
      message: '你好啊'
    },
    methods: {
      btnClick() {
        console.log('btnClick')
      },
      divClick() {
        console.log('divClick')
      },
      submitClick() {
        console.log('submitClick')
      },
      keyUp() {
        console.log('keyUp')
      },
      btn2Click() {
        console.log('btn2Click')
      }
    }
  })
</script>

</body>
</html>